<template>
  <!-- 圈子搜索页面 -->
  <view class="mian">
    <view class="top_kuang">
      <view class="top_s">
        <view class="left">
          <icon type="search" size="13" />
        </view>
        <view class="right">
          <input
            type="text"
            :value="is_input"
            placeholder="搜索圈子"
            placeholder-style="color:rgba(153,153,153,1);font-size:24rpx"
            @input="handleInput2"
          />
        </view>
        <view class="end" v-if="is_input != ''" @tap="handleClear">
          <icon type="clear" size="13" color="#000" />
        </view>
      </view>
      <view class="rigth_btn" @tap="handleInput"> 搜索 </view>
    </view>

    <block v-if="quanList.length == 0 && code_s == 0">
      <!-- 搜索历史 -->
      <view class="search_his" v-if="search_history.length != 0">
        <view class="title">
          <view class="text"> 搜索历史 </view>
          <view class="shan" v-if="!dele_" @click="handleShan">
            <image src="../../imges/shanchu.png" mode="aspectFill"></image>
          </view>
          <view class="shan_1" v-if="dele_">
            <text @click="handleAlls">全部删除</text>
            <text class="xian"></text>
            <text class="two" @tap="handleWan">完成</text>
          </view>
        </view>
        <view class="content">
          <view
            class="item"
            v-for="(item, index) in search_history"
            :key="index"
          >
            <view
              :class="[item.length > 5 ? 'name name1' : 'name']"
              @tap="handleHist(item)"
            >
              {{ item }}
            </view>
            <view v-if="dele_" class="xian">
              <text></text>
              <image
                src="../../imges/cha.png"
                mode="aspectFill"
                @click="handleSdan(index)"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 热门搜索 -->
      <view class="hot_search">
        <view class="title">
          <text>热门搜索</text>
          <image src="../../imges/hot.png" mode="aspectFill"></image>
        </view>
        <view class="list">
          <view
            class="item"
            v-for="(item, index) in hotList"
            :key="index"
            @click="handleHist(item.keyword)"
          >
            {{ item.keyword }}
          </view>
        </view>
      </view>
    </block>

    <block v-if="is_input != '' && quanList.length != 0">
      <view class="circle_list">
        <navigator
          class="circle_item"
          :url="'/pages/index/detail?id=' + item.id"
          hover-class="none"
          v-for="(item, index) in quanList"
          :key="index"
        >
          <view class="left">
            <image :src="item.orgUrl" mode="aspectFill"></image>
          </view>
          <view class="center">
            <view class="top">
              {{ item.orgName }}
            </view>
            <view class="bottom">
              <text class="one">圈主</text>
              <text class="two">{{ item.applyName }}</text>
              <text class="three">成员&nbsp; {{ item.peopleNumber }}</text>
              <text class="xian"></text>
              <text class="footer">帖子&nbsp; {{ item.postNumber }}</text>
            </view>
          </view>
          <!-- 进入设置圈子 -->
          <navigator
            :url="
              '/pages/my_circle/setQuan?id=' +
              item.id +
              '&img=' +
              item.orgUrl +
              '&name=' +
              item.orgName
            "
            hover-class="none"
            class="end"
            v-if="item.isOrg == 1"
            >设置
          </navigator>
          <!-- 进入圈子详情（加入圈子） -->
          <view class="end1" v-if="item.isOrg == 3">
            <image src="../../imges/jiaru.png" mode=""></image>
          </view>
        </navigator>
      </view>
    </block>

    <!-- 暂无圈子状态 -->
    <view class="wu_Huo" v-if="quanList.length == 0 && code_s == 1">
      <image src="../../imges/kong_s.png" mode="aspectFill"></image>
      <text>暂无关键词命中</text>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      code_s: 0,
      is_input: "", //input值
      dele_: false, // 控制是否删除
      search_history: [], //搜索历史列表
      quanList: [], //圈子列表
      hotList: [],
      pageSize: 10,
      bottom: false,
      noMore: false,
    };
  },
  onLoad() {
    this.handleHot(); //热门搜索
  },
  onShow() {
    this.search_history = uni.getStorageSync("historyList") || [];
  },
  onPullDownRefresh() {
    if (this.quanList.length == 0) {
      uni.stopPullDownRefresh();
      return false;
    }
    this.bottom = false;
    this.noMore = false;
    this.pageSize = 10;
    setTimeout(() => {
      this.handleSearch(this.is_input);
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  onReachBottom() {
    if (this.is_input == "") {
      return false;
    }
    this.bottom = true;
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    this.handleSearch(this.is_input);
  },
  methods: {
    handleSearch(key) {
      //搜所圈子
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/searchCircles",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgName: key,
            pageSize: this.pageSize,
            pageNumber: 1,
          },
        }).then((res) => {
          // console.log(res, '搜索圈子')
          if (res.data.code == 200) {
            this.quanList = res.data.data.rows;
            if (res.data.data.rows.length == 0) {
              this.code_s = 1;
            }
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              this.quanList.length >= res.data.data.total &&
              this.bottom &&
              !this.noMore
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }

            if (this.quanList.length >= res.data.data.total && this.bottom) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: "none",
              });
            } else if (
              this.quanList.length < res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleHot() {
      //热门推荐
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/home/hotList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          // console.log(res, '热门')
          if (res.data.code == 200) {
            this.hotList = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleInput2(e) {
      //输入事件
      this.is_input = e.detail.value;
    },
    handleClear() {
      //清除文本框
      (this.is_input = ""), (this.quanList = []);
      this.code_s = 0;
    },
    handleInput() {
      //完成事件（执行调用）
      this.bottom = false;
      if (this.is_input.trim() == "") {
        uni.showToast({
          title: "请输入搜索词",
          duration: 3000,
          icon: "none",
        });
        return false;
      }
      this.handleSearch(this.is_input);
      this.search_history = uni.getStorageSync("historyList") || [];
      this.search_history.unshift(this.is_input);
      this.search_history = [...new Set(this.search_history)];
      uni.setStorageSync("historyList", this.search_history);
    },
    handleShan() {
      //点删除
      this.dele_ = true;
    },
    handleWan() {
      this.dele_ = false;
    },
    handleAlls() {
      //点全删
      uni.showModal({
        title: "提示",
        content: "是否清空所有搜索历史！",
        success: (res) => {
          if (res.confirm) {
            uni.setStorageSync("historyList", []);
            this.search_history = [];
          }
        },
      });
    },
    handleSdan(index) {
      //点击删除单个
      // console.log(index)
      this.search_history.splice(index, 1);
      uni.setStorageSync("historyList", this.search_history);
    },
    handleHist(item) {
      //点击搜门搜索或者历史搜索
      this.bottom = false;
      // console.log(item)
      this.is_input = item;
      this.quanList = []; //如果搜索为空则提示
      this.handleSearch(this.is_input);
      // uni.showToast({
      // 	title: '暂无该关键字的圈子！',
      // 	duration: 3000,
      // 	icon: 'none'
      // });

      this.search_history = uni.getStorageSync("historyList") || [];
      this.search_history.unshift(this.is_input);
      this.search_history = [...new Set(this.search_history)];
      uni.setStorageSync("historyList", this.search_history);
    },
  },
};
</script>

<style scoped lang="less">
.wu_Huo {
  margin-top: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 320rpx;
    height: 310rpx;
  }

  text {
    margin-top: 10rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

.mian {
  border-top: 2rpx solid #ddddddff;
  padding: 20rpx 32rpx;
  background: rgba(255, 255, 255, 1);
  .top_kuang {
    display: flex;
    justify-content: space-between;
    .rigth_btn {
      height: 68rpx;
      width: 130rpx;
      text-align: center;
      line-height: 68rpx;
      background-color: #3165ec;
      color: #fff;
      font-size: 30rpx;
      border-radius: 34rpx;
    }
  }
  .top_s {
    width: 540rpx;
    height: 70rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2prx 30rpx 0px rgba(0, 0, 0, 0.06);
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #eee;
    padding: 0 22rpx;
    box-sizing: border-box;

    .left {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 6rpx;
    }

    .right {
      flex: 1;
      input {
        width: 100%;
        height: 100%;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }

    .end {
      height: 100%;
      display: flex;
      align-items: center;
      width: 50rpx;
      justify-content: center;
    }
  }

  .search_his .title {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text {
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      color: rgba(51, 51, 51, 1);
      font-weight: 550;
    }

    .shan {
      margin-right: 6rpx;
      margin-top: 2rpx;
      width: 32rpx;
      height: 32rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .shan_1 {
      // display: flex;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 33rpx;

      .xian {
        display: inline-block;
        width: 2rpx;
        height: 24rpx;
        margin: 0 20rpx;
        background-color: #eee;
        margin-bottom: -3rpx;
      }

      .two {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(33, 104, 235, 1);
        line-height: 33rpx;
        display: inline-block;
        height: 24rpx;
      }
    }
  }

  .search_his .content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50rpx;

    .item {
      display: flex;
      height: 56rpx;
      background: rgba(248, 248, 250, 1);
      border-radius: 28rpx;
      line-height: 55rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(70, 70, 70, 1);
      padding: 0 20rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      .name1 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        width: 200rpx;
      }
      > .xian {
        text {
          height: 26rpx;
          display: inline-block;
          width: 2rpx;
          background-color: #eee;
          margin: 0 18rpx;
          margin-bottom: -6rpx;
        }

        image {
          position: relative;
          bottom: -2rpx;
          height: 20rpx;
          width: 18rpx;
        }
      }
    }
  }

  .hot_search {
    margin-top: 40rpx;

    .title {
      display: flex;
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin-bottom: 15rpx;
      font-weight: 600;

      text {
        border-bottom: 5rpx solid #f4ec01;
      }

      image {
        width: 21rpx;
        height: 27rpx;
        margin-left: 10rpx;
        margin-top: 6rpx;
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;
        padding: 22rpx 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(70, 70, 70, 1);
        box-sizing: border-box;
        padding-left: 22rpx;
      }
    }
  }

  .circle_list {
    margin-top: 30rpx;

    .circle_item {
      margin-top: 25rpx;
      width: 100%;
      height: 132rpx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.08);
      border-radius: 12rpx;
      padding: 23rpx 19rpx;
      box-sizing: border-box;
      display: flex;
      position: relative;

      .left {
        width: 86rpx;
        height: 86rpx;
        margin-right: 13rpx;

        image {
          height: 100%;
          width: 100%;
          border-radius: 50%;
        }
      }

      .center {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;

        .top {
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }

        .bottom {
          display: flex;
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);

          .one {
            width: 53rpx;
            height: 26rpx;
            border-radius: 13rpx;
            border: 2rpx solid rgba(33, 104, 235, 1);
            font-size: 18rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(33, 104, 235, 1);
            line-height: 26rpx;
            text-align: center;
            margin-right: 19rpx;
          }

          .two {
            font-size: 24rpx;
            margin-right: 23rpx;
          }

          .xian {
            width: 2rpx;
            height: 12rpx;
            background: rgba(204, 204, 204, 1);
            border-radius: 0px;
            margin: 0 10rpx;
            margin-top: 11rpx;
          }
        }
      }

      .end {
        position: absolute;
        top: 25rpx;
        right: 17rpx;
        width: 74rpx;
        height: 34rpx;
        background: rgba(201, 220, 255, 1);
        border-radius: 21rpx;
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(33, 104, 235, 1);
        line-height: 34rpx;
        text-align: center;
      }

      .end1 {
        width: 34rpx;
        height: 34rpx;
        position: absolute;
        top: 25rpx;
        right: 17rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
